<template>
  <div class="chat-debugger">
    <div class="debugger-header">
      <h3>聊天调试器</h3>
      <button @click="toggleDebugger" class="toggle-btn">
        {{ isVisible ? '隐藏' : '显示' }}
      </button>
    </div>
    
    <div v-if="isVisible" class="debugger-content">
      <div class="debug-section">
        <h4>消息列表状态</h4>
        <div class="debug-info">
          <p><strong>消息总数:</strong> {{ chatList.length }}</p>
          <p><strong>响应状态:</strong> {{ isResponding ? '正在响应' : '空闲' }}</p>
          <p><strong>当前对话ID:</strong> {{ currentConversationId || '无' }}</p>
        </div>
      </div>
      
      <div class="debug-section">
        <h4>消息详情</h4>
        <div class="message-list">
          <div 
            v-for="(message, index) in chatList" 
            :key="message.id"
            class="message-debug-item"
            :class="{ 'user-msg': !message.isAnswer, 'ai-msg': message.isAnswer }"
          >
            <div class="message-header">
              <span class="message-index">#{{ index + 1 }}</span>
              <span class="message-type">{{ message.isAnswer ? 'AI' : '用户' }}</span>
              <span class="message-id">ID: {{ message.id }}</span>
              <span v-if="message.streaming" class="streaming-badge">流式中</span>
            </div>
            <div class="message-content-debug">
              <p><strong>内容长度:</strong> {{ message.content?.length || 0 }}</p>
              <p><strong>内容预览:</strong> {{ getContentPreview(message.content) }}</p>
              <p><strong>文件数量:</strong> {{ message.message_files?.length || 0 }}</p>
              <p><strong>思考步骤:</strong> {{ message.agent_thoughts?.length || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="debug-section">
        <h4>调试操作</h4>
        <div class="debug-actions">
          <button @click="logChatList" class="debug-btn">输出到控制台</button>
          <button @click="clearChatList" class="debug-btn danger">清空消息</button>
          <button @click="addTestMessage" class="debug-btn">添加测试消息</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useChatStore } from '@/stores/chat'
import { useConversationStore } from '@/stores/conversation'
import type { ChatItem } from '@/types/app'

const isVisible = ref(false)

const chatStore = useChatStore()
const conversationStore = useConversationStore()

const { chatList } = storeToRefs(chatStore)

const props = defineProps<{
  isResponding: boolean
}>()

const currentConversationId = computed(() => conversationStore.currConversationId)

const toggleDebugger = () => {
  isVisible.value = !isVisible.value
}

const getContentPreview = (content: string | undefined) => {
  if (!content) return '(空)'
  return content.length > 50 ? content.substring(0, 50) + '...' : content
}

const logChatList = () => {
  console.log('=== 聊天列表调试信息 ===')
  console.log('消息总数:', chatList.value.length)
  console.log('响应状态:', props.isResponding)
  console.log('当前对话ID:', currentConversationId.value)
  console.log('消息列表:', chatList.value)
  console.log('=== 调试信息结束 ===')
}

const clearChatList = () => {
  if (confirm('确定要清空所有消息吗？')) {
    chatStore.clearChatList()
    console.log('聊天列表已清空')
  }
}

const addTestMessage = () => {
  const testMessage: ChatItem = {
    id: `test_${Date.now()}`,
    content: '这是一条测试消息，用于验证消息显示功能。',
    isAnswer: false,
    message_files: []
  }
  
  chatStore.addChatItem(testMessage)
  console.log('已添加测试消息:', testMessage)
}
</script>

<style scoped>
.chat-debugger {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.debugger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.debugger-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.toggle-btn {
  padding: 4px 8px;
  font-size: 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.toggle-btn:hover {
  background: #2563eb;
}

.debugger-content {
  padding: 16px;
}

.debug-section {
  margin-bottom: 16px;
}

.debug-section h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

.debug-info p {
  margin: 4px 0;
  font-size: 12px;
  color: #374151;
}

.message-list {
  max-height: 200px;
  overflow-y: auto;
}

.message-debug-item {
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 11px;
}

.user-msg {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.ai-msg {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.message-header {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}

.message-index {
  color: #6b7280;
}

.message-type {
  color: #374151;
}

.message-id {
  color: #6b7280;
  font-family: monospace;
}

.streaming-badge {
  background: #fbbf24;
  color: #92400e;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}

.message-content-debug p {
  margin: 2px 0;
  color: #6b7280;
}

.debug-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.debug-btn {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.debug-btn:hover {
  background: #f9fafb;
}

.debug-btn.danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.debug-btn.danger:hover {
  background: #fee2e2;
}
</style> 